<template>
	<view class="person">
		<view class="flex-between">
			<view class="bold">选择赛事队员</view>
			<view style="color: #2F75FA;" @click="add" v-if="list.length">添加</view>
		</view>

		<!-- <view class="list" v-show="list.length>0">
			<scroll-view class="scroll-view_H" scroll-y="true" >
				<checkbox-group shape="circle">
					<label v-for="(item, index) in listA" :key="index" class="item flex-align">

						<checkbox color="#2f75fa" :value="item.id" @click="radioChecked(index, item)"
							:checked="item.checked" :disabled="item.disabled" />
						<view style="margin: 0 23rpx;">
							<u-avatar :src="item.avatar" size="100rpx"></u-avatar>
						</view>
						<view>
							<view class="flex-align">
								<view>{{ item.name }}</view>
								<view class="tag" v-if="item.leader">
									<u-tag text="队长" bgColor="#2F75FA" borderColor="rgba(0,0,0,0)" size="mini"></u-tag>
								</view>
								<view class="tag">
									<u-tag :text="item.position" bgColor="rgba(236, 70, 246, 0.2)"
										borderColor="rgba(0,0,0,0)" color="#EC46F6" size="mini"></u-tag>
								</view>
							</view>
							<view class="phone">
								{{ item.phone }}
							</view>
						</view>

					</label>
				</checkbox-group>
			</scroll-view>
		</view> -->
		<u-checkbox-group v-model="checked" shape="circle" v-if="list.length">
			<view class="list">
				<scroll-view class="scroll-view_H" scroll-y="true">
					<view v-for="item in listA" :key="item.id" class="item flex-align">
						<u-checkbox :name="item.id" :value="item.id" @change="radioChecked(index, item)"
							:checked="item.checked" :disabled="item.disabled" />
						<view style="margin: 0 23rpx;">
							<u-avatar :src="item.avatar" size="100rpx"></u-avatar>
						</view>
						<view>
							<view class="flex-align">
								<view>{{ item.name }}</view>
								<view class="tag" v-if="item.leader">
									<u-tag text="队长" bgColor="#2F75FA" borderColor="rgba(0,0,0,0)" size="mini"></u-tag>
								</view>
								<view class="tag">
									<u-tag :text="item.position" bgColor="rgba(236, 70, 246, 0.2)"
										borderColor="rgba(0,0,0,0)" color="#EC46F6" size="mini"></u-tag>
								</view>
							</view>
							<view class="phone">
								{{ item.phone }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-checkbox-group>
		<view v-show="list.length == 0" @click="add">
			<u-empty :icon="`${assetsPath}15ee183896ac4578c2c37c556b178a1ad00fec6a.png`" text="请添加队员或队伍>"
				textColor="#2F75FA" marginTop="80rpx"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getCurrentPath
	} from '@/utils/util.js';

	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			value: {
				type: Array,
				default: () => []
			},
			chooseStock: {
				type: Number,
				default: () => -1
			},
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				selectLength: 0,
				listA: []
			}
		},
		computed: {
			checked: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				}
			}
		},
		mounted() {
			console.log(this.list, 'jieshou')
		},
		watch: {
			list(newd, old) {
				this.listA = JSON.parse(JSON.stringify(this.list))
			}
		},
		methods: {
			radioChecked(index, item) {
				item.checked = !item.checked
				this.selectLength = this.listA.filter(item => item.checked).length || 0
				if (this.selectLength >= this.chooseStock) {
					this.listA.forEach((el, idx) => {
						if (idx == index) {
							el.disabled = false
						} else {
							if (el.checked) {
							} else {
								el.disabled = true
							}


						}
					})
				} else {
					this.listA.forEach((el, idx) => {
						el.disabled = false
					})
				}
				this.listA = JSON.parse(JSON.stringify(this.listA))
			},
			add() {
				uni.navigateTo({
					// url: `/pages/personal/member-info/add/add?return=${getCurrentPath()}`
					url: '/page_venues/pages/member-info/add/add'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .person {
	// width: 100%;
	// min-height: 100vh;
	// background-color: #f2f2f2;

	.list {
		.item {
			padding: 20rpx 0;

			.tag {
				margin-left: 10rpx;
			}

			.phone {
				color: #BEBEBE;
				font-size: 26rpx;
				margin-top: 13rpx;
			}
		}


	}


	// }
</style>
